<template>
    <hx-navbar ref="hxnb" :config="config" id="nav" @onBack="onBack" :rightSlot="false">
        <block slot="left">
            <text class="left-text">{{ config.leftText }}</text>
        </block>
        <block slot="center">
            <view class="tabs">
                <view
                    class="t-item"
                    @click="tabChange(index)"
                    :class="{ on: tabIndex == index }"
                    v-for="(item, index) in config.tabs"
                    :key="index">
                    {{ item.title }}
                </view>
            </view>
        </block>
        <block slot="right">
            <view
                class="right-btn-item"
                v-for="(item, index) in config.rightBtns"
                :key="index"
                @click="rightClick(item)">
                <text v-if="item.btnType == 1">{{ item.type }}</text>
                <uni-icons v-else class="icon" size="44" :type="item.type"></uni-icons>
            </view>
        </block>
    </hx-navbar>
</template>

<script>
export default {
    props: {
        config: {
            type: Object,
            default: () => {},
        },
        defaultActiveIndex: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            tabIndex: 0,
        }
    },
    created() {
        this.tabIndex = this.defaultActiveIndex
    },
    methods: {
        rightClick(item) {
            this.$emit("rightClick", item)
        },
        onBack() {
            this.$emit("onBack")
        },
        tabChange(e) {
            this.tabIndex = e
            this.$emit("tabChange", e)
        },
    },
}
</script>

<style lang="scss">
/deep/.hx-navbar__content__main_center_flex {
    flex: 10;
}

.tabs {
    display: flex;
    font-size: 16px;
    .t-item {
        flex: 1;
        &.on {
            font-size: 18px;
            font-weight: bold;
        }
    }
}
.right-btn-item {
    padding: 14rpx $app-page-padding;
}

.left-text {
    margin-left: -24rpx;
}
</style>
